<template>
  <div class="l animate__animated animate__fadeIn">
    <div class="item">
      <div class="title">
        <span class="title-tips">管道材质</span
        ><img src="/static/img/title02.png" />
      </div>
      <div class="tips">
        <span class="r1">{{ state.msTotal.toFixed(2) }}</span
        >总长(Km)
      </div>
      <div class="item1-b">
        <div class="item1-b_i" v-for="(item, index) in gxCzList" :key="index">
          {{ item.gxCz }}<span class="r1">{{ item.percentage * 100 }}</span
          >(%)
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-tips">管道年份</span
        ><img src="/static/img/title02.png" />
      </div>
      <div class="echarts" ref="echarts1"></div>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-tips">管道管径</span
        ><img src="/static/img/title02.png" />
      </div>
      <div class="echarts" ref="echarts2"></div>
    </div>
  </div>
  <div class="r animate__animated animate__fadeIn">
    <div class="item">
      <div class="title">
        <span class="title-tips">管道埋深</span
        ><img src="/static/img/title02.png" />
      </div>
      <div class="tips">
        <span class="r1">{{ state.msTotal.toFixed(2) }}</span
        >总长(Km)
      </div>
      <div class="item1-b">
        <!-- <div class="item1-b_i">管点总数<span class="r1">256</span>(个)</div>
        <div class="item1-b_i">燃气管点<span class="r1">256</span>(个)</div>
        <div class="item1-b_i">钢管<span class="r1">1.25</span>(Km)</div> -->
        <div class="item1-b_i" v-for="(item, index) in msList">
          {{ item.ms }}<span class="r1" :key="index">{{ item.len }}</span>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-tips">铺设类型</span
        ><img src="/static/img/title02.png" />
      </div>
      <div class="echarts" ref="echarts3"></div>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-tips">功能操作</span
        ><img src="/static/img/title02.png" />
      </div>
      <!-- <div class="echarts" ref="echarts4"></div> -->
      <div class="box-btn">
        <!-- <div class="box-sw">
          <div class="btn-i btn-i1" @click="clickPath('燃气三维')">
            燃气三维
          </div>
        </div> -->
        <div class="box-min" @click="clickPath('燃气管理')">
          <div>燃气管理</div>
          <img src="@/assets/icon/centerIcon.20e8dfad.png" />
        </div>
        <div class="box-btn-item">
          <div class="btn-i btn-i1" @click="clickTool(1)">空间测量</div>
          <div class="btn-i btn-i2" @click="clickTool('快速查询')">
            快速查询
          </div>
        </div>
        <div class="box-btn-item">
          <div class="btn-i btn-i3" @click="clickTool('爆管分析')">
            爆管分析
          </div>
          <div class="btn-i btn-i4" @click="clickTool('管线老化分析')">
            老化分析
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="c">
    <div class="box">
      <div class="i">
        <div class="tips"><text>57.55</text>km</div>
        <div class="t">燃气管线</div>
      </div>
      <div class="i">
        <div class="tips"><text>256</text>个</div>
        <div class="t">燃气管点</div>
      </div>
      <div class="i">
        <div class="tips"><text>56.29</text>km</div>
        <div class="t">PE管线</div>
      </div>
      <div class="i">
        <div class="tips"><text>1.25</text>km</div>
        <div class="t">钢管管线</div>
      </div>
    </div>
  </div> -->
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, reactive, onMounted, toRefs } from 'vue'
import ManageService from '@/service/manage.service'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const state = reactive({
  gxCzList: [],
  yearList: [],
  gjList: [],
  msList: [],
  msTotal: 0,
  msTypeList: [],
  sbTypeList: []
})
const { gxCzList, yearList, gjList, msList, msTypeList, sbTypeList } =
  toRefs(state)
const echarts1 = ref(null)
const echarts2 = ref(null)
const echarts3 = ref(null)
const echarts4 = ref(null)
// const echarts5 = ref(null)
const emits = defineEmits(['clickTool'])
const clickTool = (type) => {
  emits('clickTool', type)
}
const clickPath = (type) => {
  if (type === '燃气管理') {
    window.open(
      router.resolve({ path: '/ex/filelist' }).href +
        '?' +
        sessionStorage.getItem('xzq'),
      '_blank'
    )
  } else if (type === '燃气三维') {
    router.push({ path: '/cesium' })
  }
}
const initEcharts1 = () => {
  const chart1 = echarts.init(echarts1.value)
  const chart1Data = yearList.value.map((item) => {
    return {
      name: item.year,
      value: item.len.toFixed(2)
    }
  })
  chart1Data.sort((a, b) => b.value - a.value)
  // let yData = [20, 80, 60, 77];
  // let xTime = ['2023.3.28', '2023.4.28', '2023.5.28', '2023.6.15'];
  chart1.setOption({
    // backgroundColor: '#000',
    tooltip: {
      trigger: 'axis',
      formatter: function (param) {
        let resultTooltip =
          "<div style='border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
          '<div>' +
          param[0].name +
          '</div>' +
          "<div style='padding-top:5px; font-size:10px;color:#999;'>" +
          "<span style='display: inline-block; width: 10px; height:10px; border-radius: 50%;background: " +
          param[0].color +
          ";'></span>" +
          "<span style=''> " +
          param[0].seriesName +
          '：</span>' +
          "<span style='font-size:16px;color:" +
          param[0].color +
          "'>" +
          param[0].value +
          '</span></span>' +
          '</div>'
        return resultTooltip
      },
      position: 'right',
      padding: [5, 8],
      textStyle: {
        color: '#eee',
        fontSize: 13
      },
      axisPointer: {
        type: 'line',
        label: { show: true, backgroundColor: 'transparent' },
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(100, 101, 171, 0)' },
              { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
              { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
              { offset: 1, color: 'rgba(100, 101, 171, 1)' }
            ],
            global: false
          },
          type: 'solid',
          width: 40
        }
      },
      backgroundColor: 'rgba(13,5,30,.6)',
      extraCssText: 'z-index:1' // 层级
    },
    legend: {
      show: false,
      data: ['km'],
      icon: 'circle',
      x: 'center',
      y: '0',
      itemGap: 20,
      // orient: 'vertical', // 纵向分布
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    grid: {
      top: '5%',
      left: '3%',
      right: '10%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      name: 'Km',
      nameLocation: 'center',
      nameTextStyle: {
        color: '#8F8F8F',
        fontSize: 12,
        padding: [0, 0, 0, 1505]
      },
      data: chart1Data.map((item) => {
        return item.name
      }),
      axisLabel: {
        fontSize: 10,
        color: '#fff'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(62, 100, 151, 0.29)'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '',
      nameLocation: 'end',
      nameGap: 10,
      max: 100,
      nameTextStyle: {
        color: '#8F8F8F',
        fontSize: 12,
        padding: [0, 0, 5, -45]
      },
      boundaryGap: true,
      interval: 10, //间隔
      axisLabel: {
        fontSize: 12,
        color: '#fff'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(62, 100, 151, 0.29)'
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: 'Km',
        data: chart1Data.map((item) => {
          return item.value
        }),
        type: 'line',
        symbolSize: 10.2, // 原点大小
        smooth: true,
        zlevel: 1, // 层级
        label: {
          normal: {
            position: 'right',
            show: true,
            color: '#eee',
            fontSize: 13,
            formatter: function (params) {
              return params.data + 'Km'
            }
          }
        },
        // 折线拐点的样式
        itemStyle: {
          normal: {
            // 静止时：
            color: '#0088FF',
            borderColor: '#0088FF', //拐点的边框颜色
            borderWidth: 20
          },
          emphasis: {
            // 鼠标经过时：
            color: '#4CF8C5'
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0.1, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 199, 242, .9)'
            },
            {
              offset: 1,
              color: 'rgba(0, 199, 242, .2)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        }
      }
    ]
  })
  // 添加点击事件
  chart1.on('click', function (params) {
    // 判断是否点击了柱状图的数据
    if (params.seriesType === 'line') {
      // 获取点击的数据值和名称
      const value = params.data
      const name = params.name
      const arr = ['10年以内', '10~15年', '15~20年', '20年以上']
      const index = arr.indexOf(name)
      if (index !== -1) {
        ElMessage.info('管线分析中，请稍后')
        ManageService.year_line({ year: index }).then((res) => {
          ElMessage.success('管线分析完成，正在绘制')
          emits('clickTool', '管线高亮', res.data)
          // gxCzList.value = res.data
        })
      }
    }
  })
}
const initEcharts2 = () => {
  const chart2 = echarts.init(echarts2.value)
  const chart2Data = gjList.value.map((item) => {
    return {
      name: item.gj,
      count: item.count,
      value: item.len.toFixed(2)
    }
  })
  chart2Data.sort((a, b) => b.count - a.count)
  const arr = chart2Data.map((item) => {
    return { name: item.name, value: item.count }
  })
  chart2.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical', // 标签栏的方向，vertical 为垂直
      left: 'right', // 标签栏的显示位置
      top: '5%',
      textStyle: {
        color: '#fff', // 这里设置文字颜色
        fontSize: 10 // 可选：设置字号
      }
    },
    series: [
      {
        //最外部细虚线
        // 类型是仪表盘
        type: 'gauge',
        // 位置必须和饼状图的一样，否者设置出来会有偏差
        center: ['40%', '50%'],
        /**
         * startAngle：仪表盘起始角度。
         * 圆心正右手侧为0度，正上方为90度，正左手侧为180度。
         * 就是说：逆时针
         * */
        startAngle: 270,
        // endAngle：仪表盘结束角度。最初值是：-89.9999,
        endAngle: -90,
        // 设置虚线的大小
        radius: '75%',
        // 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度
        // 如果设置为 show: true,就会显示刻度样式
        axisTick: {
          show: false
        },
        // false 不显示标签
        axisLabel: {
          show: false
        },
        // 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距
        // splitNumber: 65 更加直接的表现是外层有65段虚线
        splitNumber: 65,
        axisLine: {
          // 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
          show: false
          // lineStyle：仪表盘轴线样式。
          // lineStyle: {
          //   // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8']
          //   color: [
          //   [0.1, 'red'], // 0~10% 红轴
          //   [0.2, 'green'], // 10~20% 绿轴
          //   [0.3, 'blue'], // 20~30% 蓝轴
          //   ],
          //   width: 10
          // }
        },
        // 分隔线样式。
        splitLine: {
          show: false, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
          length: 0, // 分隔线与轴线的距离。这里表现是虚线的宽度
          lineStyle: {
            width: 10, // 分隔线线长。支持相对半径的百分比。
            color: '#fff' // 线的颜色
          }
        },
        // 仪表盘详情，用于显示数据。
        detail: {
          show: false
        }
      },
      // 圆环
      {
        type: 'pie',
        center: ['30%', '50%'], // 饼状图的位置
        /**
         * radius：饼状图的大小
         * 它是一个数组，第1个值表示里面的圆的大小
         * 第2个值表示外面的圆的大小
         * */
        radius: ['30%', '60%'],
        itemStyle: {
          normal: {
            label: {
              show: false,
              padding: [0, 0],
              alignTo: 'labelLine'
            },
            color: (list) => {
              let colorList = [
                {
                  colorStart: '#FF9800',
                  colorEnd: '#FFD180'
                },
                {
                  colorStart: '#673AB7',
                  colorEnd: '#9575CD'
                },
                {
                  colorStart: '#0F9D58',
                  colorEnd: '#4CAF50'
                },
                {
                  colorStart: '#00BCD4',
                  colorEnd: '#64FFDA'
                },
                {
                  colorStart: '#E91E63',
                  colorEnd: '#FF80AB'
                },
                {
                  colorStart: '#50a163',
                  colorEnd: '#50a163'
                },
                {
                  colorStart: '#20dbfd',
                  colorEnd: '#20dbfd'
                },
                {
                  colorStart: '#e6f706',
                  colorEnd: '#e6f706'
                },
                {
                  colorStart: '#ff8624',
                  colorEnd: '#ff8624'
                }
              ]
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  //左、下、右、上
                  offset: 0,
                  color: colorList[list.dataIndex]['colorStart']
                },
                {
                  offset: 1,
                  color: colorList[list.dataIndex]['colorEnd']
                }
              ])
            }
          }
        },
        // 标签的视觉引导线配置
        labelLine: {
          show: false, // 是否显示视觉引导线
          length: 10, // 视觉引导线第一段的长度。
          length2: 10, // 视觉引导项第二段的长度。
          lineStyle: {
            color: '#fff', // 这里设置扇线颜色为灰色
            width: 0, // 线段宽度
            type: 'solid' // 线段类型，默认为实线
          }
        },
        // 从 v5.0.0 开始支持  标签的统一布局配置。
        labelLayout: {
          // 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。
          verticalAlign: 'bottom',
          // 标签在 y 方向上的像素偏移，设置标签在引导线的上方
          dy: -4
        },
        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
        label: {
          show: false,
          // 标签的位置。
          position: 'outside',
          normal: {
            textStyle: {
              color: '#fff' // 设置引导线外层文字描述的颜色
            },
            // 字符串模板 模板变量有：
            // {a}：系列名。
            // {b}：名称。
            // {c}：数据值。
            // {d}：百分比。
            formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
            padding: [0, -40], // 设置标签距离引导线水平方向的距离
            rich: {
              aisB1: {
                color: '#fff'
              },
              aisC1: {
                color: '#fff'
              },
              aisD1: {
                color: '#fff' // 这是数据值的颜色
              }
            }
          }
        },
        data: arr,
        // 高亮状态的扇区和标签样式 设置饼图外围虚线
        emphasis: {
          // 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致
          label: {
            color: '#fff'
          },
          labelLine: {
            // 这里设置悬停时引导线的颜色，与非悬停时保持一致
            lineStyle: {
              color: '#fff'
            }
          }
        }
      },

      // 配置里面的圆
      {
        type: 'gauge',
        center: ['30%', '50%'], // 饼状图的位置
        radius: '35%',
        // 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
        // 如果是版本是5，这里可以是360
        startAngle: 359.999,
        endAngle: 0,
        splitNumber: 4,
        zlevel: 10,
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: [[1, '#fff']],
            width: '100%',
            shadowColor: '#CDCDCD', //背景阴影颜色
            shadowOffsetX: 0, // X偏移量
            shadowOffsetY: 0, // Y偏移量
            shadowBlur: 10 // 模糊范围
          }
        },
        splitLine: {
          //分隔线样式
          show: false
        },
        axisLabel: {
          //刻度标签
          show: false
        },
        axisTick: {
          //刻度样式
          show: false
        },
        detail: {
          show: false
        },
        //仪表盘指针。
        pointer: {
          // 不显示仪表盘中的指针
          show: false
        },
        title: {
          // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
          // 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
          offsetCenter: ['0%', '0%'],
          color: '#999999'
        },
        data: [
          {
            name: '管道数'
          }
        ]
      }
    ]
  })
}
const initEcharts3 = () => {
  const chart3 = echarts.init(echarts3.value)
  const chart3Data = msTypeList.value.map((item) => {
    return {
      name: item.msType,
      value: item.len.toFixed(2)
    }
  })
  // ref([
  //   { name: '直线点', value: 161 },
  //   { name: '弯头', value: 3 },
  //   { name: '三通', value: 47 },
  //   { name: '气源点', value: 1 },
  //   { name: 'JF', value: 40 },
  //   { name: '管冒', value: 4 }
  // ])
  chart3Data.sort((a, b) => b.value - a.value)
  const yData = chart3Data.map((item) => {
    return item.value
  })
  chart3.setOption({
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '8%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item',
      formatter: function (parms) {
        return parms.marker + ' ' + parms.name + '：' + parms.value + 'Km'
      }
    },
    xAxis: {
      type: 'category', // category(坐标轴类型)
      data: chart3Data.map((item) => {
        return item.name
      }),
      axisTick: {
        // 坐标轴刻度相关配置
        show: false // 是否显示坐标轴刻度
      },
      axisLine: {
        // 坐标轴轴线相关配置
        lineStyle: {
          // 坐标轴轴线样式
          color: 'rgba(255,255,255,0.15)' // 坐标轴轴线颜色
        }
      },
      axisLabel: {
        // 坐标轴刻度标签相关配置
        color: '#ffffff',
        fontSize: 14,
        margin: 20
      }
    },
    yAxis: {
      type: 'value', // value(数值轴,适用于连续数据)
      axisTick: {
        // 坐标轴刻度相关配置
        show: false // 是否显示坐标轴刻度
      },
      axisLine: {
        // 坐标轴轴线相关配置
        show: false // 是否显示坐标轴轴线
      },
      axisLabel: {
        // 坐标轴刻度标签相关配置
        color: '#ffffff',
        fontSize: 14
      },
      splitLine: {
        // 坐标轴在 grid 区域中的分隔线
        lineStyle: {
          // 分割线配置
          color: 'rgba(255,255,255,0.15)' // 分割线颜色
        }
      }
    },
    series: [
      // 底部的椭圆形(象形柱图):pictorialBar
      {
        type: 'pictorialBar', // pictorialBar(象形柱图)
        label: {
          // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
          show: true, //是否显示标签
          position: ['17', '-30'], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
          color: '#01E4FF',
          fontSize: 14
        },
        symbolSize: [40, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
        symbolOffset: [0, 10], // 图形相对于原本位置的偏移
        z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
        itemStyle: {
          // 图形样式
          // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
          // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(31,155,255,1)'
            },
            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,1)'
            }
          ])
        },
        data: yData
      },
      // 中间的长方形柱状图(柱状图):bar
      {
        type: 'bar', // 柱状图
        barWidth: 40, // 柱条的宽度,不设时自适应
        barGap: '0%', // 柱子与柱子之间的距离
        itemStyle: {
          // 图形样式
          // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
          // 下面就是使用线性渐变
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0, // 0%处的颜色
                color: 'rgba(0,229,255,0.5)'
              },
              {
                offset: 1, // 100%处的颜色
                color: '#1F9BFF'
              }
            ]
          }
        },
        data: yData
      },
      // 顶部的椭圆形(象形柱图):pictorialBar
      {
        type: 'pictorialBar',
        symbolSize: [40, 20],
        symbolOffset: [0, -10],
        z: 12,
        symbolPosition: 'end',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(31,155,255,1)'
              },
              {
                offset: 1,
                color: 'rgba(0,229,255,1)'
              }
            ],
            false
          )
        },
        data: yData
      }
    ]
  })
}
const initEcharts4 = () => {
  const chart4 = echarts.init(echarts4.value)
  const chart4Data = sbTypeList.value.map((item) => {
    return {
      name: item.tz,
      value: item.num
    }
  })
  //   ref([
  //   { name: '网点统计', value: 16, dw: '个' },
  //   { name: '用户数量', value: 926, dw: '人' },
  //   { name: '钢瓶总数', value: 6721, dw: '只' },
  //   { name: '车辆统计', value: 89, dw: '辆' },
  //   { name: '场站统计', value: 16, dw: '个' },
  //   { name: '配气工数量', value: 122, dw: '人' },
  // ])
  chart4Data.sort((a, b) => a.value - b.value)
  chart4.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var tooltipText = ''
        if (params.length > 0) {
          tooltipText += params[0].name + '<br>'
          tooltipText += params[0].value + `(个})` + '<br>'
          // 在这里可以根据需要添加更多的信息，params 数组包含了所有数据点的信息
        }
        return tooltipText
      }
    },
    xAxis: {
      // axisLine: {
      //   //x轴坐标轴，false为隐藏，true为显示
      //   show: false
      // },

      // axisTick: {
      //   show: false
      // },
      axisLabel: {
        formatter: function (value) {
          // 返回 value 的前三个字符
          return value.substring(0, 2)
        },
        show: true,
        textStyle: {
          color: '#ffffff'
        }
      },
      type: 'category',
      data: chart4Data.map((item) => {
        return item.name
      })
    },
    yAxis: {
      splitLine: {
        show: false
      },
      axisLine: {
        //y轴
        show: false
      },
      axisTick: {
        show: false // 隐藏Y轴刻度线
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#ffffff'
        }
      },
      max: 1000, // 设置Y轴的最大值为10
      type: 'value'
    },
    grid: {
      top: '10%',
      left: '10%',
      right: '1%',
      bottom: '30%',
      containLabel: false
    },
    series: [
      {
        data: chart4Data.map((item) => {
          return { value: item.value }
        }),
        barWidth: 22,
        label: {
          show: true,
          position: 'top',
          color: '#ffffff'
        },
        itemStyle: {
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
              { offset: 0, color: '#004fa8' },
              { offset: 1, color: '#00f0fd' }
            ])
          }
        },
        type: 'bar'
      }
    ]
  })
}
const initEcharts = () => {
  // const chart5 = echarts.init(echarts5.value)
  // chart5.setOption({
  //   tooltip: {
  //     show: false, // 关闭鼠标移上去后显示浮框信息
  //     trigger: 'item',
  //     confine: true
  //   },
  //   graphic: [{
  //     type: 'text',
  //     left: 'center',
  //     top: '45%',
  //     style: {
  //       text: '天然气企业',
  //       textAlign: 'center',
  //       fill: '#fff',
  //       fontSize: 14
  //     }
  //   }],
  //   series: [
  //     {
  //       name: 'Access From',
  //       type: 'pie',
  //       radius: ['40%', '60%'],
  //       data: [
  //         { value: 1, name: '区域数量' },
  //         { value: 50, name: '从业人员' },
  //         { value: 0, name: '许可证到期' },
  //         { value: 1, name: '符合经营' },
  //       ],
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowOffsetX: 0,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       }
  //     }
  //   ]
  //   // series: [
  //   //   {
  //   //     name: 'Access From',
  //   //     type: 'pie',
  //   //     radius: ['40%', '60%'],
  //   //     avoidLabelOverlap: false,
  //   //     hoverAnimation: false,
  //   //     label: {
  //   //       show: true,
  //   //       position: 'center', // 设置标签位置为饼状图中心
  //   //       formatter: '{b}\n{c} ({d}%)' // 设置标签文本格式
  //   //     },
  //   //     emphasis: {},
  //   //     labelLine: {
  //   //       show: false
  //   //     },
  //   //     data: [
  //   //       { value: 1048, name: '进水口' },
  //   //       { value: 0, name: 'Direct' },
  //   //     ]
  //   //   }
  //   // ]
  // })
}
onMounted(() => {
  initEcharts()
  setTimeout(() => {
    ManageService.post_material().then((res) => {
      gxCzList.value = [
        {
          gxCz: 'PE',
          percentage: 1
        }
      ]
    })
    ManageService.post_year().then((res) => {
      res.data = [
        {
          year: '五年',
          len: 21
        },
        {
          year: '十年',
          len: 13.6
        }
      ]
      yearList.value = res.data
      initEcharts1()
    })
    ManageService.post_gj().then((res) => {
      res.data = [
        {
          gj: 'De200',
          len: 34.6,
          count: 354
        }
      ]
      gjList.value = res.data
      initEcharts2()
    })
    ManageService.post_ms().then((res) => {
      const arr = res.data.map((item) => {
        return { ms: item.ms, len: item.len.toFixed(2) }
      })
      let total = 0
      arr.forEach((item) => {
        total = Number(total) + Number(item.len)
      })
      state.msTotal = 34.6
      msList.value = [
        { ms: '0.3-0.6', len: 32.4 },
        { ms: '0.6-0.9', len: 2.0 }
      ]
    })
    ManageService.post_msType().then((res) => {
      res.data = [{ msType: '直埋', len: 34.6 }]
      msTypeList.value = res.data
      initEcharts3()
    })
    ManageService.post_point_tz().then((res) => {
      sbTypeList.value = res.data
      initEcharts4()
    })
  }, 500)
})
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'yjsz';
  src: url('/static/ttf/yjsz.TTF');
  font-weight: normal;
  font-style: normal;
}

.l {
  width: 320px;
  height: 80%;
  color: #fff;
  background: rgba(0, 17, 42, 0.5);
  position: absolute;
  left: 40px;
  padding: 0 10px;
  z-index: 100;
  top: 10%;
  border-radius: 5px;
  padding: 5px 10px;

  .item {
    &:nth-child(1) {
      // margin-top: 50px;
      height: 30%;

      .item1-b {
        height: calc(100% - 100px);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        padding: 0 30px;
        margin-top: -10px;

        .item1-b_i {
          width: 50%;
        }

        .r1 {
          color: #20dbfd;
          text-shadow: 0 0 10px #00d8ff;
          font-size: 26px;
          font-weight: bold;
          padding-right: 5px;
          font-family: yjsz;
        }
      }
    }

    &:nth-child(2) {
      height: 30%;
    }

    &:nth-child(3) {
      height: 40%;
    }

    .title {
      // margin-bottom: 10px;
      // padding-bottom: 5px;
      font-size: 18px;
      letter-spacing: 5px;
      position: relative;
      line-height: 35px;

      .title-tips {
        position: absolute;
        left: 30px;
        top: 4px;
        font-style: oblique;
        /* 设置文字为倾斜 */
        font-size: 22px;
        background: linear-gradient(to bottom, #ffffff, #d2e3f3);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
      }

      img {
        width: 100%;
        height: 25px;
        margin-top: 20px;
        // position: absolute;
        // left: 0;
        // bottom: 0;
        // top: 0;
      }

      // background: url(/static/img/fgx.png) no-repeat;
      // background-size: 100% 11px;
    }

    .tips {
      margin-top: 15px;
      padding-left: 10px;

      .r1 {
        color: #20dbfd;
        text-shadow: 0 0 10px #00d8ff;
        font-size: 46px;
        font-weight: bold;
        padding-right: 5px;
        font-family: yjsz;
      }
    }

    .echarts {
      height: calc(100% - 35px);
    }
  }
}

.r {
  width: 320px;
  height: 80%;
  color: #fff;
  background: rgba(0, 17, 42, 0.5);
  position: absolute;
  right: 40px;
  padding: 0 10px;
  z-index: 100;
  top: 10%;
  border-radius: 5px;
  padding: 5px 10px;

  .item {
    &:nth-child(1) {
      // margin-top: 50px;
      height: 30%;

      .item1-b {
        height: calc(100% - 100px);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        padding: 0 30px;
        margin-top: -10px;

        .item1-b_i {
          width: 50%;
          text-align: right;
        }

        .r1 {
          color: #e6f706;
          text-shadow: 0 0 10px #00d8ff;
          font-size: 26px;
          font-weight: bold;
          padding-right: 5px;
          font-family: yjsz;
        }
      }
    }

    &:nth-child(2) {
      height: 30%;
    }

    &:nth-child(3) {
      height: 40%;
    }

    .title {
      font-size: 18px;
      letter-spacing: 5px;
      position: relative;
      line-height: 35px;
      // text-align: right;
      // overflow: hidden;
      // width: 100%;

      .title-tips {
        position: absolute;
        left: 30px;
        top: 4px;
        font-style: oblique;
        /* 设置文字为倾斜 */
        font-size: 22px;
        background: linear-gradient(to bottom, #ffffff, #d2e3f3);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
      }

      img {
        width: 100%;
        height: 25px;
        margin-top: 20px;
        // position: absolute;
        // left: 0;
        // bottom: 0;
      }
    }

    .tips {
      margin-top: 15px;
      padding-right: 10px;
      text-align: right;
      width: 100%;

      .r1 {
        color: #e6f706;
        text-shadow: 0 0 10px #00d8ff;
        font-size: 46px;
        font-weight: bold;
        padding-right: 5px;
        font-family: yjsz;
      }
    }

    .echarts {
      height: calc(100% - 35px);
    }
  }
}

.c {
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0;
  z-index: 99;
  background-image: linear-gradient(
    -180deg,
    rgba(255, 255, 255, 0) 0%,
    #0b173f 80%
  );
  display: flex;
  justify-content: center;
  align-items: end;

  .box {
    width: 808px;
    height: 110px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;

    .i {
      width: 170px;
      height: 110px;
      background: url(/static/icon/dizuo.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      margin: 0 20px;

      .tips {
        color: #80fdea;
        margin-top: 10px;

        text {
          font-size: 26px;
          font-weight: bold;
        }
      }

      .t {
        color: #fff;
        margin-top: 5px;
      }
    }

    .echarts1 {
      width: 33.33333%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      :deep(.el-progress.is-success .el-progress__text) {
        color: #fff;
      }

      .num {
        margin-bottom: 5px;
        font-size: 20px;
        font-weight: 600;
      }

      &:nth-child(1) {
        .num {
          color: #7ffcce;
        }
      }

      &:nth-child(2) {
        .num {
          color: #ffff70;
        }
      }

      &:nth-child(3) {
        .num {
          color: #f3ccff;
        }
      }
    }
  }
}

:deep(.percent svg path:nth-child(1)) {
  stroke: #0d3166;
}

.box-btn {
  height: calc(100% - 50px);
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  .box-min {
    position: absolute;
    width: 82px;
    height: 82px;
    left: calc(50% - 36px);
    top: calc(50% - 41px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    div {
      z-index: 9;
      background-color: rgba(0, 0, 0, 0.6);
    }
    img {
      width: 82px;
      height: 82px;
      position: absolute;
    }
  }
  .box-sw {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 80px);
    .btn-i {
      margin: 0 20px;
      width: 110px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;

      &.btn-i1 {
        background: url(@/assets/icon/color1.5a13450a.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .box-btn-item {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    margin: 30px 0;

    .btn-i {
      margin: 0 20px;
      width: 110px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;

      &.btn-i1 {
        background: url(@/assets/icon/color1.5a13450a.png) no-repeat;
        background-size: 100% 100%;
      }

      &.btn-i2 {
        background: url(@/assets/icon/color2.f62d9bdd.png) no-repeat;
        background-size: 100% 100%;
      }

      &.btn-i3 {
        background: url(@/assets/icon/color3.56cb31e2.png) no-repeat;
        background-size: 100% 100%;
      }

      &.btn-i4 {
        background: url(@/assets/icon/color4.780784ee.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
